<template>
	<view class="container">
		<u-toast ref="uToast" />
		<u-navbar :is-back="false" title="主页" back-icon-color='#333333' height="50" :border-bottom="false">
			<view class="" style="margin-left: 670rpx; display: flex;align-content: center;">
				<text
					style="width: 51rpx; height: 51rpx; border-radius: 50%; background:linear-gradient(to bottom, #FF9241, #FF5046);color:#fff; text-align: center;line-height: 51rpx;"
					@click.stop="handle_registration">签</text>
			</view>
		</u-navbar>
		<swiper :autoplay="true" :interval="3000" :duration="1000" :indicator-dots="true" indicator-active-color="#fff">
			<swiper-item>
				<image src="../../static/tupian73.png" mode="widthFix" style="width: 100%;"> </image>
			</swiper-item>
			<swiper-item>
				<image src="../../static/tupian73.png" mode="widthFix" style="width: 100%;"> </image>
			</swiper-item>
		</swiper>
		<view class="box">
			<image src="../../static/tupian77.png" mode="widthFix"></image>
			<text>{{registration}}</text>
			<text>{{time}}</text>
		</view>
		<view class="blank" style="width: 100%; height: 30rpx; background-color:#F2F2F2;">
		</view>
		<view class="enter" @click="$toLink('../compile/compile',{})">
			<image src="../../static/tupian76.png" mode="widthFix"></image>
			<text>{{entrance}}</text>
			<image src="../../static/tupian78.png" mode="widthFix"></image>
		</view>
		<view class="logo">
			<view class="sign" v-for="(item,index) in dataList" :key="index" @click="$toLink(item.route,{id:3})">
				<image :src="item.url" mode="widthFix"></image>
				<text :class="[index==0?'con':index==2?'third':'']">{{item.text}}</text>
			</view>
		</view>
		<view class="approve">
			<image src="../../static/tupian79.png" mode="widthFix"></image>
			<text>{{approval}}</text>
			<image src="../../static/tupian78.png" mode="widthFix"></image>
		</view>
		<view class="school">
			<view class="info" v-for="(i,j) in absenceList" :key="j" @click="skip_page(i)">
				<image src="../../static/tupian80.png" mode="widthFix"></image>
				<view class="right">
					<view class="">
						{{i.reason}}
					</view>
					<view class="">
						<text>{{i.startTime}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="email">
			<image src="../../static/tupian57.png" mode="widthFix"></image>
			<text>{{email}}</text>
			<image src="../../static/tupian78.png" mode="widthFix"></image>
		</view>
		<view class="list">
			<view class="latest" v-for="(item,index) in emailList" :key="index"
				@click="$toLink('../check/check',{id:item.email_id,index:0})">
				<view class="left">
					<image :src="item.teacher_user_info?item.teacher_user_info.avatar_img:''" mode="widthFix"></image>
				</view>
				<view class="right">
					<view class="top_email">
						<view class="" :id="[changetype(item)? 'con':'']">
							{{changeWord(item)}}
						</view>
						<text
							:style="{marginLeft:changeMargin(item)}">{{item.email_info ? item.email_info.title : ''}}</text>
						<text>{{item.startTime}}</text>
					</view>
					<view class="center">
						{{item.email_info ? item.email_info.content : ''}}
					</view>
					<view class="bottom">
						<text></text>
					</view>
				</view>
			</view>
		</view>
		<view class="notify_title" @click="$toLink('../school_notification/school_notification',{})">
			<image src="../../static/tupian85.png" mode="widthFix"></image>
			<text>{{notify_title}}</text>
			<image src="../../static/tupian78.png" mode="widthFix"></image>
		</view>
		<view id="latest_notify">
			<view class="layout">
				<view class="notify" v-for="(item,index) in notify_list" :key="index"
					@click="$toLink('../inform_detail/inform_detail',{id:item.school_notify_id})">
					<view class="left">
						<image :src="$toggleIcon(item.type)" mode="widthFix"></image>
					</view>
					<view class="right">
						<view class="top">
							<text style="width:550rpx;">{{item.title}}</text>
						</view>
						<view class="center">
							{{item.textLength}}
						</view>
						<view class="bottom">
							<text>{{item.create_time}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-mask :show="show">
			<view class="wrap">
				<view class="rect" @tap.stop>
					<view id="icon">
						<view class="notice">
							<image src="../../static/tupian16.png" mode="widthFix"></image>
							<text>发布通知</text>
						</view>
						<view id="dynamic">
							<image src="../../static/tupian16.png" mode="widthFix"></image>
							<text>发布动态</text>
						</view>
						<view id="email">
							<image src="../../static/tupian17.png" mode="widthFix"></image>
							<text>发布邮件</text>
						</view>
						<view id="course">
							<image src="../../static/tupian23.png" mode="widthFix"></image>
							<text>发送课件</text>
						</view>
						<view id="upload">
							<image src="../../static/tupian45.png" mode="widthFix"></image>
							<text>上传图片</text>
						</view>
						<image src="../../static/tupian146.png" mode="widthFix" id="del" @click.stop="hide"></image>
						<view class="hump">
						</view>
					</view>
				</view>
			</view>
		</u-mask>
		<u-tabbar :list="list" active-color="#2491FE" :mid-button="true" @change="changeIndex"></u-tabbar>
	</view>
</template>
<script>
	import {
		mapState
	} from 'vuex'
	import request from '../../request.js'
	import time from '../../time.js'
	export default {
		data() {
			return {
				notify_title: '最新通知',
				inbox_list: [],
				img_url: '../../static/tupian81.png', //子组件导入本地的图片需要和父组件引入本地图片路径一致，否则会报错（这是个bug）
				email_list: [{
						circle: 'ad',
						url: '../../../static/tupian81.png',
						text: '广告邮件',
						content: '根据教育局通知安排,元旦放假三天，与2020年12月...',
						start_date: '2019.04.03',
						detail_time: '12:00:00'

					},
					{
						circle: '学',
						url: '../../../static/tupian81.png',
						text: '12347@rice.com.cn',
						content: '根据教育局通知安排,元旦放假三天，与2020年12月...',
						start_date: '2019.04.03',
						detail_time: '12:00:00'

					}
				],
				latest_list: [{
						circle: '5',
						logo: '../../static/tupian82.png',
						text: '学校通知',
						content: '根据教育局通知安排,元旦放假三天，与2020年12月...',
						start_date: '2019.04.03',
						detail_time: '12:00:00'

					},
					{
						circle: '5',
						logo: '../../static/tupian83.png',
						text: '班级通知',
						content: '周三下午英语课考试测试,同学们记得复习.',
						start_date: '2019.04.03',
						detail_time: '12:00:00'

					},
					{
						circle: '',
						logo: '../../static/tupian84.png',
						text: '年级通知',
						content: '周冬冬老师,以下是今天的上课安排,请尽快...',
						start_date: '2019.04.03',
						detail_time: '12:00:00'

					}
				],

				registration: '签到时间:',
				show: false,
				time: '12:00:00',
				entrance: '快捷入口',
				email: '未读邮件',
				approval: '待审批',
				dataList: [{
						url: '../../static/tupian71.png',
						route: '../email/email',
						text: '邮件管理',
					},
					{
						url: '../../static/tupian57.png',
						route: '../file_management/file_management',
						text: '文件管理',
					},
					{
						url: '../../static/tupian69.png',
						route: '../campus_album/campus_album',
						text: '校园相册',
					},
					{
						url: '../../static/tupian67.png',
						route: '../school_meeting/school_meeting',
						text: '校内会议',
					}
				],
				school_list: [{
						url: '../../static/tupian80.png',
						text: '学校召开2020级新生军训总结表彰大会',
						start_date: '2019.04.03',
						detail_date: '12:00:00'
					},
					{
						url: '../../static/tupian80.png',
						text: '如何开展学生思想政治工作,为教育的改革发展提供动力支持',
						start_date: '2019.04.03',
						detail_date: '12:00:00'
					},
					{
						url: '../../static/tupian80.png',
						text: '学校召开2020级新生军训表彰大会',
						start_date: '2019.04.03',
						detail_date: '12:00:00'
					},
				],
				notifyList: [],
				absence_list: [],
			}
		},
		computed: {
			...mapState(['list']),
			notify_list() {
				if (this.notifyList) {
					this.notifyList.forEach(item => {
						if (item.text.length > 21) {
							this.$set(item, 'textLength', item.text.substr(0, 21) + '...');
						} else {
							this.$set(item, 'textLength', item.text);
						}
					})
					return this.notifyList;
				} else {
					return [];
				}
			},
			emailList() {
				if (this.inbox_list) {
					this.inbox_list.forEach(item => {
						this.$set(item, 'startTime', time.format(item.create_time));
					})
					return this.inbox_list;
				} else {
					return [];
				}
			},
			absenceList() {
				if (this.absence_list) {
					this.absence_list.forEach(item => {
						this.$set(item, 'startTime', time.format(item.start_time));
						this.$set(item, 'endTime', time.format(item.end_time));
						this.$set(item, 'createTime', time.format(item.create_time));
					})
					return this.absence_list;
				} else {
					return [];
				}
			}

		},
		onLoad() {
			this.schoolNotifyLists();
			this.getLists();
			this.leaveLists();
			this.$store.dispatch('getTodos');
		},
		methods: {
			//切换显示和隐藏
			changeIndex(e) {
				console.log(e);
				switch (e) {
					case 2:
						this.show = !this.show;

				}
			},
			skip_page(param) {
				let obj = param;
				let str = param.status;
				let content = this.$status(str, 3);
				switch (content) {
					case '去审核':
						this.$toLink('../audit/audit', {
							student_leave_id: obj.student_leave_id,
							type: obj.reason_type,
							reason: obj.reason,
							student_id: obj.student_user_info ? obj.student_user_info.nation_license : '',
							class: obj.classes_info ? obj.classes_info.classes_name : '',
							files: obj.files,
							start_time: obj.startTime,
							end_time: obj.endTime,
							name: obj.student_user_info ? obj.student_user_info.full_name : '',
						});
						break;
				}
			},
			//点击签到
			handle_registration() {
				let base_url = uni.getStorageSync('host');
				console.log(base_url);
				let _this = this;
				request({
					url: base_url + 'teacher/sign/signToday',
					method: 'post',
					success(res) {
						if (res.statusCode == 200) {
							console.log(res.data);
							_this.handle_calendar();
						} else {
							_this.$refs.uToast.show({
								title: res.data.message || '系统错误',
								type: 'warning',
							})
						}

					}
				})
			},
			//获取签到时间
			handle_calendar() {
				let base_url = uni.getStorageSync('host');
				console.log(base_url);
				let _this = this;
				request({
					url: base_url + 'teacher/sign/calendar',
					method: 'post',
					data: {
						year: new Date().getFullYear(), //当前的年份和月份
						month: new Date().getMonth() + 1,
					},
					success(res) {
						if (res.statusCode == 200) {
							let str = '';
							console.log(res.data.data);
							str = time.format(res.data.data[0].create_time);
							_this.time = str;
						} else {
							_this.$refs.uToast.show({
								title: res.data.message || '系统错误', 
								type: 'warning',
							})
						}

					}
				})
			},
			changeTag(param) {
				let str = '';
				str = param.email_info ? param.email_info.level : '';
				return str;
			},
			changeMargin(param) {
				let bolen = '';
				let obj = param;
				let str = this.changetype(obj);
				switch (str) {
					case true:
						bolen = '15rpx';
						break;
					default:
						bolen = '65rpx';
				}
				return bolen;
			},
			changetype(param) {
				let bolen = '';
				let obj = param;
				let str = this.changeTag(obj);
				switch (str == '紧急') {
					case true:
						bolen = true;
						break;
					default:
						bolen = false;
				}
				return bolen;

			},
			changeWord(param) {
				let bolen = '';
				let obj = param;
				let str = this.changeTag(obj);
				switch (str) {
					case '紧急':
						bolen = '紧急';
						break;
					default:
						bolen = '';
				}
				return bolen;
			},
			hide() {
				this.show = !this.show;
			},
			getLists() {
				let base_url = uni.getStorageSync('host');
				console.log(base_url);
				let _this = this;
				request({
					url: base_url + 'teacher/email/getLists',
					method: 'post',
					success(res) {
						if (res.statusCode == 200) {
							_this.inbox_list = res.data.data.data;
						} else {
							_this.$refs.uToast.show({
								title: res.data.message || '系统错误',
								type: 'warning',
							})
						}

					}
				})
			},
			//学校通知
			schoolNotifyLists() {
				let base_url = uni.getStorageSync('host');
				console.log(base_url);
				let _this = this;
				request({
					url: base_url + 'teacher/schoolNotify/lists',
					method: 'post',
					data: {
						type: '全部',
					},
					success(res) {
						if (res.statusCode == 200) {
							_this.notifyList = res.data.data.data;
							console.log(_this.notifyList);
						} else {
							_this.$refs.uToast.show({
								title: res.data.message || '系统错误',
								type: 'warning',
							})
						}

					}
				})
			},
			leaveLists() {
				let base_url = uni.getStorageSync('host');
				console.log(base_url);
				let _this = this;
				request({
					url: base_url + 'teacher/student_leave/lists',
					data: {
						status: 1,
					},
					method: 'post',
					success(res) {
						if (res.statusCode == 200) {
							_this.absence_list = res.data.data.data;
							console.log(_this.absence_list);
						} else {
							_this.$refs.uToast.show({
								title: res.data.message || '系统错误',
								type: 'warning',
							})
						}

					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.container {
		width: 100%;

		.box {
			width: 100%;
			height: 81rpx;
			background-color: #fff;
			display: flex;
			align-items: center;
			justify-content: flex-start;

			image {
				&:nth-child(1) {
					width: 36rpx;
					margin-left: 15rpx;
				}
			}

			text {
				color: #333333;
				font-size: 30rpx;

				&:nth-child(2) {
					margin-left: 40rpx;
				}

				&:nth-child(3) {
					margin-left: 100rpx;
				}
			}
		}

		.enter {
			width: 100%;
			height: 72rpx;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			background-color: #fff;

			image {
				width: 36rpx;

				&:nth-child(1) {
					margin-left: 15rpx;
				}

				&:nth-child(3) {
					width: 20rpx;
					margin-left: 500rpx;
				}
			}

			text {
				&:nth-child(2) {
					margin-left: 30rpx;
					color: #333333;
					font-size: 30rpx;
				}
			}
		}

		.logo {
			width: 100%;
			height: 175rpx;
			display: flex;
			justify-content: flex-start;

			.sign {
				width: 132rpx;
				margin-left: 40rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: flex-start;

				.con {
					margin-top: 33rpx !important;
				}

				.third {
					margin-top: 31rpx !important;
				}

				image {
					&:nth-child(1) {
						width: 62rpx;
					}
				}

				text {
					&:nth-child(2) {
						font-size: 30rpx;
						color: #333333;
						margin-top: 26rpx;
					}
				}
			}
		}

		.approve {
			width: 100%;
			height: 91rpx;
			background: #F2F2F2;
			display: flex;
			justify-content: flex-start;
			align-items: center;

			image {
				&:nth-child(1) {
					width: 36rpx;
					margin-left: 20rpx;
				}

				&:nth-child(3) {
					width: 20rpx;
					margin-left: 530rpx;

				}
			}

			text {
				&:nth-child(2) {
					color: #666666;
					font-size: 30rpx;
					margin-left: 25rpx;
				}
			}
		}

		.school {
			width: 100%;
			background: #fff;

			.info {
				width: 710rpx;
				margin-left: 20rpx;
				border-bottom: 1px solid #F2F2F2;
				display: flex;
				justify-content: flex-start;
				padding-bottom: 20rpx;

				image {
					&:nth-child(1) {
						margin-top: 30rpx;
						margin-left: 13rpx;
						width: 67rpx;
					}
				}

				.right {
					margin-top: 20rpx;
					margin-left: 20rpx;
					width: 600rpx;

					view {
						&:nth-child(1) {
							width: 100%;
							color: #333333;
							font-size: 28rpx;
						}

						&:nth-child(2) {
							padding-top: 15rpx;
							width: 100%;
							display: flex;
							justify-content: flex-start;
							align-items: center;

							text {
								color: #b7b7b7;
								font-size: 22rpx;

								&:nth-child(2) {
									margin-left: 27rpx;
								}
							}
						}
					}
				}

			}



		}

		.email {
			width: 100%;
			height: 100rpx;
			background: #F2F2F2;
			display: flex;
			justify-content: flex-start;
			align-items: center;

			image {
				&:nth-child(1) {
					width: 36rpx;
					margin-left: 20rpx;
				}

				&:nth-child(3) {
					width: 20rpx;
					margin-left: 500rpx;
				}
			}

			text {
				&:nth-child(2) {
					color: #666666;
					font-size: 30rpx;
					margin-left: 28rpx;
				}
			}
		}

		.wrap {
			width: 100%;
			display: flex;
			align-items: flex-end;
			justify-content: center;
			height: 100%;

			.rect {
				margin-bottom: 150rpx;
				width: 710rpx;
				height: 377rpx;
				border-radius: 20rpx;

				#icon {
					height: 357rpx;
					background: #fff;
					width: 100%;
					border-radius: 20rpx;
					position: relative;

					.hump {
						width: 220rpx;
						height: 120rpx;
						position: absolute;
						left: 245rpx;
						top: 248rpx;
						background: #fff;
						border-radius: 50%;
					}

					.notice {
						width: 130rpx;
						height: 105rpx;
						left: 77rpx;
						top: 40rpx;
						position: absolute;
						z-index: 100;
						display: flex;
						justify-content: flex-start;
						flex-direction: column;
						align-items: center;

						image {
							&:nth-child(1) {
								width: 47rpx;
							}
						}

						text {
							&:nth-child(2) {
								margin-top: 20rpx;
								color: #333333;
								font-size: 30rpx;
							}
						}
					}

					#dynamic {
						width: 130rpx;
						height: 105rpx;
						left: 291rpx;
						top: 40rpx;
						position: absolute;
						z-index: 100;
						display: flex;
						justify-content: flex-start;
						flex-direction: column;
						align-items: center;

						image {
							&:nth-child(1) {
								width: 47rpx;
							}
						}

						text {
							&:nth-child(2) {
								margin-top: 20rpx;
								color: #333333;
								font-size: 30rpx;
							}
						}
					}

					#email {
						width: 130rpx;
						height: 105rpx;
						left: 505rpx;
						top: 40rpx;
						position: absolute;
						z-index: 100;
						display: flex;
						justify-content: flex-start;
						flex-direction: column;
						align-items: center;

						image {
							&:nth-child(1) {
								width: 45rpx;
								margin-top: 5rpx;
							}
						}

						text {
							&:nth-child(2) {
								margin-top: 25rpx;
								color: #333333;
								font-size: 30rpx;
							}
						}
					}

					#course {
						width: 130rpx;
						height: 105rpx;
						left: 140rpx;
						top: 180rpx;
						position: absolute;
						z-index: 100;
						display: flex;
						justify-content: flex-start;
						flex-direction: column;
						align-items: center;

						image {
							&:nth-child(1) {
								width: 47rpx;
							}
						}

						text {
							&:nth-child(2) {
								margin-top: 20rpx;
								color: #333333;
								font-size: 30rpx;
							}
						}
					}

					#upload {
						width: 130rpx;
						height: 105rpx;
						left: 440rpx;
						top: 180rpx;
						position: absolute;
						z-index: 100;
						display: flex;
						justify-content: flex-start;
						flex-direction: column;
						align-items: center;

						image {
							&:nth-child(1) {
								width: 47rpx;
							}
						}

						text {
							&:nth-child(2) {
								margin-top: 20rpx;
								color: #333333;
								font-size: 30rpx;
							}
						}
					}

					#del {
						width: 51rpx;
						position: absolute;
						z-index: 1000;
						left: 330rpx;
						top: 305rpx;
					}

				}

			}
		}

		.list {
			width: 100%;
			background: #fff;

			.latest {
				width: 710rpx;
				margin-left: 20rpx;
				border-bottom: 1px solid #F2F2F2;
				display: flex;
				height: 150rpx;
				justify-content: flex-start;

				.left {
					width: 80rpx;
					overflow: hidden;

					image {
						margin-top: 30rpx;
						margin-left: 13rpx;
						width: 62rpx;

					}
				}

				.right {
					margin-top: 20rpx;
					margin-left: 20rpx;
					width: 600rpx;

					.top_email {
						width: 100%;
						display: flex;
						justify-content: flex-start;
						height: 50rpx;

						#con {
							margin-top: 9rpx;
							width: 60rpx;
							height: 30rpx;
							border-radius: 3rpx;
							color: #fff;
							font-size: 16rpx;
							text-align: center;
							line-height: 30rpx;
							background-color: #EC654E;
						}

						view {
							&:nth-child(1) {
								margin-top: 20rpx;
								width: 12rpx;
								height: 12rpx;
								border-radius: 50%;
								background: #ABC0F7;
							}
						}

						text {
							color: #333333;
							font-size: 30rpx;

							&:nth-child(2) {
								margin-left: 15rpx;
								margin-top: 0rpx;
								width: 240rpx;
							}

							&:nth-child(3) {
								margin-top: 10rpx;
								margin-left: 15rpx;
								color: #b7b7b7;
								font-size: 20rpx;
								width: 250rpx;

							}

						}

						image {
							&:nth-child(4) {
								width: 20rpx;
								margin-top: 8rpx;
							}
						}

					}

					.center {
						width: 100%;
						margin-top: 10rpx;
						font-size: 26rpx;
						color: #333333;
						overflow: hidden;
					}

					.bottom {
						width: 100%;
						font-size: 24rpx;
						color: #999999;
					}

				}

			}
		}

		.notify_title {
			width: 100%;
			height: 100rpx;
			background: #F2F2F2;
			display: flex;
			justify-content: flex-start;
			align-items: center;

			image {
				&:nth-child(1) {
					width: 36rpx;
					margin-left: 20rpx;
				}

				&:nth-child(3) {
					width: 20rpx;
					margin-left: 500rpx;
				}
			}

			text {
				&:nth-child(2) {
					color: #666666;
					font-size: 30rpx;
					margin-left: 28rpx;
				}
			}
		}

		#latest_notify {
			width: 100%;
			overflow: hidden;

			.layout {
				width: 710rpx;
				background-color: #fff;
				margin-left: 20rpx;

				.notify {
					width: 690rpx;
					margin-left: 10rpx;
					height: 155rpx;
					background-color: #fff;
					border-bottom: 1rpx solid #F2F2F2;
					display: flex;
					justify-content: flex-start;

					.left {
						width: 70rpx;
						height: 155rpx;
						margin-left: 5rpx;
						position: relative;

						image {
							&:nth-child(1) {
								position: absolute;
								width: 70rpx;
								left: 2rpx;
								top: 29rpx;
							}
						}

						text {
							&:nth-child(2) {
								width: 25rpx;
								height: 25rpx;
								border-radius: 50%;
								background-color: #f00;
								text-align: center;
								line-height: 25rpx;
								color: #fff;
								font-size: 5rpx;
								position: absolute;
								z-index: 100;
								display: block;
								right: 0rpx;
								top: 25rpx;
							}
						}

						.vanish {
							display: none !important;
						}

					}

					.right {
						width: 590rpx;
						margin-left: 25rpx;
						height: 155rpx;
						overflow: hidden;

						.top {
							width: 100%;
							height: 50rpx;
							font-size: 28rpx;
							display: flex;
							justify-content: flex-start;
							color: #333333;
							margin-top: 19rpx;

							text {
								&:nth-child(1) {
									margin-top: 8rpx;
								}
							}
						}

						.center {
							width: 100%;
							font-size: 24rpx;
							color: #666666;
							height: 35rpx;
							// margin-top: 10rpx;
						}

						.bottom {
							width: 100%;
							height: 24rpx;
							color: #b7b7b7;
							font-size: 22rpx;
							margin-top: 12rpx;
						}

					}

					&:nth-child(1) {
						margin-top: 20rpx;
					}
				}
			}

		}
	}
</style>
